.post { 
  background-color: #ffffff;  /* 设置一个与背景不同的浅色，增加层次感 */
  padding: 20px;
  margin: 20px 0;
  position: relative;
  border-radius: 15px;  /* 圆角边缘 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); /* 添加轻微的阴影，使帖子与背景区分开 */
}

.post-header {
  display: flex;
  align-items: center; /* 使头像和用户名垂直居中 */
  justify-content: space-between; /* 使关注按钮位于右侧 */
}

.post-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px; 
  border-radius: 50%; /* 圆形头像 */
  object-fit: cover; /* 保持图片的比例，裁剪多余部分 */
}


.post-author-time {
  display: flex;                  /* 使用 Flexbox 布局 */
  flex-direction: column;         /* 竖直排列 */
  margin-right: auto;            /* 靠左显示 */
}

.post-author-name {
  font-size: 16px;
  font-weight: bold;
}

.post-time {
  font-size: 12px;
  color: #3f3f3f;
}

/* 基本的按钮样式 */
.follow-btn {
  height: 40px;  /* 使按钮与头像的高度一致 */
  width: 100px;  /* 设置按钮宽度 */
  padding: 0 10px 0 0;  /* 去除上下内边距，只留左右内边距 */
  border: none;
  background-color: #F2F2F2;
  border-radius: 11px;  /* 圆角按钮 */
  cursor: pointer;
  font-size: 14px;  /* 设置适合的字体大小 */
  display: flex;
  align-items: center;
  align-self: start;
  justify-content: center;
  transition: transform 0.2s;
}

.follow-btn:hover {
  transform: scale(1.05);  /* 鼠标悬停时放大 */
}


.follow-btn-inner-followed{
  width: 70px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#808080;
}

.follow-btn-inner-not-followed{
  background-color: #ABC6D4;
  border-radius: 11px 0 0 11px;
  color: #FFFFFF;
  width: 70px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图标样式 */
.follow-icon {
  width: 25px;  /* 缩小图标宽度 */
  height: 25px;  /* 缩小图标高度 */
  margin-left: 6px;  
}

.post-footer-text{
  font-size: 18px;
  color: #3f3f3f;
  margin-left: 5px;
}


.post-body {
  margin-top: 10px;
}

.post-body h3{
  padding-left: 10px;
  font-size: 20px;
  font-weight: 500;
  color:#303336;
}

.post-content{
  display: flex;
  padding: 10px;
}

.post-images img {
  width: 170px;
  height: auto;
  object-fit: cover;
  margin-top: 10px;
  margin-right: 20px;
}

.post-footer {
  display: flex;
  gap: 15%;
  margin-top: 5%;
  align-items: center; 
}

.post-footer-item {
  display: flex;
  align-items: center; 
}


/* 放大点赞、评论、收藏按钮 */
.post-footer-icon {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: transform 0.2s;
}


/* 点赞、评论、收藏按钮鼠标悬停效果 */
.post-footer-icon:hover {
  transform: scale(1.05);
}

.post-footer-icon-img{
  margin: 4.5px 4px;
  width: 24px;
  height: 23px;
  transition: transform 0.2s;
}

.post-footer-icon-img:hover{
  transform: scale(1.05);
}

/* 评论区 */
.comment-section {
  margin-top: 15px;
}

/* 评论输入框 */
.comment-input {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}



.comment-input textarea {
  width: 90%;
  height: 30px;
  padding: 5px;
  margin-right: 10px;
  border-radius: 5px;
  color: #3b3b3b;
  border: 3px solid rgb(156, 185, 199);
  font-size: 16px;  /* 修正字体大小 */
  resize: none;  /* 禁止调整文本框大小 */
  outline: none;  /* 去除默认边框 */
}

.comment-input.active textarea {
  border-color: rgb(175, 175, 175); /* 输入框被激活时边框颜色变为灰色 */
}


/* 发送评论按钮 */
.send-comment-btn {
  border: none;
  padding: 10px;
  cursor: pointer;
  background: transparent;
  display: flex;
  justify-content: center;
}

/* 发送按钮图标 */
.send-icon {
  width: 30px;
  height: 30px;
  fill: #9a9a9a;  /* 默认颜色 */
}



/* 点击后放大再复原 */
.send-icon.clicked {
  animation: clickEffect 0.40s ease-in-out;
}

/* 动画关键帧：点击后复原 */
@keyframes clickEffect {
  0% {
    transform: scale(1); /* 初始状态 */
  }
  50% {
    transform: scale(0.8); 
  }
  100% {
    transform: scale(1); /* 复原 */
  }
}


/* 评论列表 */
.comments-list {
  padding: 5px;
  border-top: 1px solid #b8b8b8;
  overflow-y: auto; /* 允许垂直滚动 */
  max-height: 25vh; /* 限制最大高度，超出部分滚动 */
}

/* 单条评论 */
.comment-item {
  padding: 5px 0;
  border-bottom: 1px solid #b8b8b8;
}

.comment-item span {
  font-size: 15px;
  color: #323232;  /* 评论文本颜色 */
}
